<template>
    <div id="myCart">
        <div id="title">
            <i class="el-icon-star-on"></i>
            <span>购物车</span>
            <i class="el-icon-star-on"></i>
        </div>
        <div id="info">
            <div id="front">
                <span>商品</span>
                <span>详情</span>
            </div>
            <div id="back">
                <span>卖家</span>
                <span>数量</span>
                <span>单价</span>
                <span>操作</span>
            </div>
        </div>
        <div id="cartproducts">
            <cartproduct 
            v-for="i in cartProducts"
            :key="i.index"
            :img="i.image"
            :name="i.name"
            :description="i.description"
            :sellername="i.sellerUsername"
            :price="i.price"
            :number="i.number"
            :id="i.pid"
            @func="deleteProduct"
            :total="i.total"
            ></cartproduct>
            <!-- DEMO -->
            <!-- <cartproduct 
            v-for="i in 5"
            :key="i.index"
            img="https://img20.360buyimg.com/n0/s80x80_jfs/t1/176665/17/7135/196173/608b605aEfcd15ef8/89329ba17947348e.jpg.dpg"
            name="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听力翻译语法自营包邮"
            description="【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮"
            sellername="Spark星火英语Spark星火英语"
            price="55.00"
            number="12"
            id="3"
            @func="deleteProduct"
            total="243"
            ></cartproduct> -->
        </div>
    </div>
</template>

<script>
import cartproduct from "../components/cartProduct.vue"
import {request} from "../network/request"

export default {
    components: {
        cartproduct
    },
    data(){
        return{
            pid:'',
            cartProducts: ''
        }
    },
    methods:{
        deleteProduct(pid){
            console.log(pid)
            request({
                url: 'myCart',
                method: 'get',
                params: {
                    pid: pid
                }
            }).then(res => {
                this.cartProducts = res.data.cartProducts
            })
        }
    },
    created(){
        request({
            url: 'myCart',
            method: 'get',
            params: {
                pid: this.pid
            }
        }).then(res => {
            console.log(res)
            this.cartProducts = res.data.cartProducts
        })
    }
}
</script>

<style scoped>

#myCart {
    background-color: #fff;
}

#title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding-top: 25px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    width: 180px;

}

#title i {
    padding: 5px;
}

#info {
    display: flex;
    justify-content: space-around;
    background-color: rgb(232,232,232);
    margin: 10px 10px;
    padding: 10px 0;
}

#front, #back{
    display: flex;
    justify-content: space-around;
    width: 50%;
}

#cartproducts {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

</style>